<template>
  <Home>
    <!-- 头部 -->
    <div class="data">
      <div class="title">人员信息</div>
      <!-- 搜索框 -->
      <div class="content">
        <span>
          人员名称:
          <input class="userinput" placeholder="请输入" v-model="name" />
        </span>
        <span>
          人员类型:
          <input class="userinput" placeholder="请输入" v-model="classify" />
        </span>
        <a-button
          style="margin-left: 0.385621rem"
          type="primary"
          @click="changename(name, classify)"
          >查询</a-button
        >
        <a-button
          style="margin-left: 0.137255rem"
          type="primary"
          @click="addshoping"
          >添加</a-button
        >
      </div>
    </div>

    <!-- 表格部分 -->
    <div class="container">
      <el-table
        :data="
          tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
        "
        class="container"
      >
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="name"
          label="姓名"
          width="153"
        />
        <!-- <el-table-column prop="remarks" label="寺庙简介" width="170" /> -->
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="gender"
          label="性别"
          width="153"
        />
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="idcard"
          label="身份证号"
          width="153"
        />
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="classify"
          label="人员类型"
          width="153"
        />
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="phone"
          label="手机号"
          width="153"
        />
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="profession"
          label="工种"
          width="153"
        />
        <el-table-column
          align="center"
          prop="createTime"
          :formatter="dataFormat"
          label="创建时间"
          width="153"
        ></el-table-column>
        <el-table-column label="操作" width="153" align="center">
          >
          <template slot-scope="scope">
            <el-button
              @click="handleClickDelate(scope.row.id)"
              type="text"
              size="small"
              >删除</el-button
            >
            <el-button
              @click="handleClickUpdata(scope.row)"
              type="text"
              size="small"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 弹窗部分 -->
    <el-dialog title="更改人员信息" :visible.sync="dialogFormVisible">
      <el-form>
        <el-form-item label="名称" :label-width="formLabelWidth">
          <el-input v-model="from.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-input v-model="from.gender" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="人员类型" :label-width="formLabelWidth">
          <el-input v-model="from.classify" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="身份证" :label-width="formLabelWidth">
          <el-input v-model="from.number" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-input v-model="from.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="工种" :label-width="formLabelWidth">
          <el-input v-model="from.profession" autocomplete="off"></el-input>
        </el-form-item>

        <a-upload
          name="userfile"
          :multiple="true"
          action="/goimg"
          :data="extraData"
          @change="handleChange"
        >
          <a-button style="margin-top: 0.098039rem">
            <a-icon type="upload" />上传图片
          </a-button>
        </a-upload>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="changeOK()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 分页器 -->
    <div class="block" style="margin-top: 0.098039rem">
      <el-pagination
        align="center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[1, 5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
      >
      </el-pagination>
    </div>
  </Home>
</template>

<script>
import moment from "moment";
import Home from "@/components/Home/index";
// import { listTemple } from "@/api/getInfoList";
import { listPerson } from "@/api/getInformation";
import { deletePerson } from "@/api/deleteInformation";
import { createPerson } from "@/api/createInformation";
import { updatePerson } from "@/api/updateInformation";

export default {
  methods: {
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    //时间戳
    dataFormat: function (row) {
      var data = row.createTime / 1000;
      if (data == undefined) {
        return "";
      }
      return moment.unix(data).format("YYYY-MM-DD");
    },

    //封装更新方法
    async Update(id, params) {
      console.log(params);
      const data = await updatePerson(id, params);
      return data;
    },

    //封装创建方法
    async Create(parmars) {
      console.log(parmars);
      const data = await createPerson(parmars);
      return data;
    },

    // 封装获取总表方法
    async List() {
      const data = await listPerson(this.params);
      this.tableData = data.list;
      console.log(this.tableData);
    },

    // 封装name查询方法
    async NameList(name, classify) {
      const data = await listPerson({
        name: name,
        classify: classify,
        page: 1,
        perPage: 1000,
      });
      return data;
    },

    // 封装删除方法
    async Delete(id) {
      const data = await deletePerson(id);
      return data;
    },

    //上传图片
    extraData(file) {
      return { name: file.name };
    },
    handleChange(info) {
      // console.log(info);
      // const Personimg = [];
      // for (let i of info.fileList) {
      //   console.log(i.response.data.imgid);
      //   Personimg.push(i.response.data.imgid);
      // }
      // console.log(Personimg);
      // // const tempimg = info.file.response
      // this.from.Personimg = Personimg;
      const img = info.fileList[info.fileList.length - 1].response.data.imgid;
      this.from.img = img;
    },

    //点击编辑弹出框
    handleClickUpdata(row) {
      this.id = row.id;
      this.$router.push({
        name: "monk",
        params: {
          id: row.id,
        },
      });
    },

    //调用name查询
    changename(value) {
      console.log(value);
      this.NameList(value).then((res) => {
        console.log(res);
        this.tableData = res.list;
      });
    },

    //调用删除方法
    handleClickDelate(id) {
      //   console.log(row);
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // console.log(id);
          this.Delete(id).then((res) => {
            console.log(res);
            if (res == true)
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            else
              this.$message({
                type: "error",
                message: "删除失败!",
              });
          });
          this.List();
          // this.$message({
          //   type: "success",
          //   message: "删除成功!",
          // });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //点击添加商品弹出框
    addshoping() {
      this.dialogFormVisible = true;
    },

    //点击弹框确认按钮
    changeOK() {
      this.dialogFormVisible = false;
      //调用创建方法
        delete this.from.id;
        delete this.from.stationName;
        delete this.from.createTime;
        delete this.from.appellations;
        delete this.from.sName;
        delete this.from.occupations;
        this.from.social.push({
          appellations: this.from.appellations,
          sName: this.from.sName,
          occupation: this.from.occupations,
        });
        this.Create(this.from).then((res) => {
          if (res == true)
            this.$message({
              type: "success",
              message: "创建成功!",
            });
          else
            this.$message({
              type: "error",
              message: "创建失败!",
            });
        });
        this.List();
      //调用更新方法
      // else if (templet == 1) {
      //   console.log("templet = 1");
      //   const id = this.id;
      //   delete this.from.id;
      //   delete this.from.stationName;
      //   delete this.from.createTime;
      //   this.from.social.push({
      //     appellations: this.from.appellations,
      //     sName: this.from.sName,
      //     occupation: this.from.occupations,
      //   });
      //   //this.from.status = Number(this.from.status);
      //   this.Update(id, this.from).then((res) => {
      //     if (res == true)
      //       this.$message({
      //         type: "success",
      //         message: "更新成功!",
      //       });
      //     else
      //       this.$message({
      //         type: "error",
      //         message: "更新失败!",
      //       });
      //   });
      //   this.List();
      // }
    },
  },

  data() {
    return {
      currentPage: 1, // 当前页码
      total: 20, // 总条数
      pageSize: 10, // 每页的数据条数
      imageUrl: " ",
      id: "",
      count: 0,
      params: {
        page: 1,
        perPage: 1000,
      },
      formLabelWidth: ".653595rem ",
      dialogFormVisible: false,
      name: "",
      classify: "",
      // 表格内容
      tableData: [],
      social: [],
      //弹框的内容
      from: {
        occupations: "", //亲戚现在从事什么职业
        appellations: "", //亲戚称谓
        sName: "", //亲戚姓名
        birth: "", //出生日期
        certificate: "", //教职人员证号
        classify: "", //人员类型
        crime: "", //参与违法犯罪事件情况
        degree: "", //获取学位、寺、院名称
        disciplined: "", //受戒情况
        disciplinedTime: "", //受戒时间
        dratSang: "", //所属扎仓
        endTime: "", //证件截止时间
        gender: "", //性别
        identity: "", //职教身份
        img: "", //图片列表
        legalName: "", //法名
        name: "", //人员名称
        nation: "", //民族
        native: "", //籍贯
        number: "", //身份证
        occupation: "", //职业
        performance: "", //现实表现
        phone: "", //手机号
        police: "", //录入人员
        post: "", //教内职务
        profession: "", //工种
        religious: "", //宗教学位
        remarks: "", //备注
        responsibility: "", //责任经师
        sects: "", //所属教派
        shrine: "", //所属寺庙
        social: [], //社会关系
        teacher: "", //受戒经师
        telephone: "", //联系电话
        templePosition: "", //寺内职务
        templeTime: "", //入寺时间
        train: "", //参与培训情况
        usedName: "", //曾用名
      },
    };
  },
  components: {
    Home,
  },
  mounted() {
    this.List();
  },
};
</script>
<style scoped>
.container {
  width: 8.006536rem /* 1225/153 */;
  margin: 0 auto;
}
.userinput {
  border-radius: 0.039216rem /* 6/153 */;
}
</style>